<template>
  <div class="num1">
    <el-popover
      placement="bottom-start"
      width="310"
      trigger="click"
      v-model="flag"
    >
      <el-button slot="reference"
        >{{ this.number }}
        <i class="el-icon-user"></i>
      </el-button>
      <!-- 弹出内容 -->
      <div class="content">
        <div class="top">
          <el-col :span="8"
            ><div class="grid-content bg-purple every">每间</div></el-col
          >
          <el-col :span="8">
            <div class="grid-content bg-purple-light">
              <el-select
                v-model="value"
                placeholder="2 成人"
                @change="change()"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple-light">
              <div class="grid-content bg-purple-light">
                <el-select
                  v-model="value1"
                  placeholder="0 儿童"
                  @change="change1()"
                >
                  <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div></div
          ></el-col>
        </div>
        <div class="bottom">
          <button class="btn" @click="submit">确定</button>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false,
      number: "人数未定",
      options: [
        {
          value: "1",
          label: "1",
        },
        {
          value: "2",
          label: "2",
        },
        {
          value: "3",
          label: "3",
        },
        {
          value: "4",
          label: "4",
        },
        {
          value: "5",
          label: "5",
        },
        {
          value: "6",
          label: "6",
        },
        {
          value: "7",
          label: "7",
        },
      ],
      options1: [
        {
          value: "1",
          label: "1",
        },
        {
          value: "2",
          label: "2",
        },
        {
          value: "3",
          label: "3",
        },
        {
          value: "4",
          label: "4",
        },
      ],
      value: "2 成人",
      value1: "0 儿童",
    };
  },
  methods: {
    submit() {
      this.number = this.value + " " + this.value1;
      this.flag = false;
      console.log(this.number);
    },
    change() {
      this.value = this.value + " 成人";
    },
    change1() {
      console.log(this.value1);
      this.value1 = this.value1 + " 儿童";
    },
  },
};
</script>

<style lang="less" scoped>
// /deep/
.el-button {
  width: 100%;
  border-color: #dcdfe6;
  color: #c0c4cc;
  border-radius: 4px;
  text-align: left;
  .el-icon-user {
    float: right;
  }
  &:hover {
    border-color: #c0c4cc;
    background-color: transparent;
    cursor: text;
  }
  &:blur {
    background-color: transparent;
  }
  &:focus {
    border-color: #66b1ff;
  }
}
.content {
  // width: 326px;
  padding: 12px;
  height: 100px;
  .top {
    color: #606266;
    overflow: hidden;
    height: 50%;
    // background-color: turquoise;
    // height: 30px;
  }
  .el-input--mini .el-input__inner {
    height: 28px;
    line-height: 28px;
  }
  .bottom {
    // background-color: pink;
    height: 50%;
    border-top: 1px #dddddd solid;
    .btn {
      background-color: #409eff;
      width: 56px;
      height: 28px;
      color: #fff;
      border: 0px;
      outline: 0px;
      cursor: pointer;
      border-radius: 4px;
      float: right;
      margin-top: 20px;
      // padding-top: 20px;
      &:hover {
        background-color: #66b1ff;
      }
    }
  }
}
</style>